<template>
	<div class="warehousing-list table-theme">
		<head-title title="库存--发货明细"></head-title>
		<el-card>
			<div class="warehousing-list-menu">
				<div class="warehousing-list-menu-left">
					<div class="data-filtering-left">
						<p style="line-height: 40px;margin-right: 10px;">请选择</p>
						<div class="select-view">
							<el-date-picker @change="selectTime" v-model="selectModel.time" type="daterange" align="right" range-separator="至"
							 start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd"></el-date-picker>
						</div>
						<div style="margin-left: 10px;width: 180px;">
							<el-select v-model="shipping_status" placeholder="请选择发货状态" @change="init(1)">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</div>
					</div>
				</div>
				<div class="warehousing-list-menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="wList" border>
				<el-table-column label="序号" align="center" prop="order_id"></el-table-column>
				<el-table-column label="订单编号" align="center" prop="order_sn"></el-table-column>
				<el-table-column label="收货人" align="center" prop="accept_name"></el-table-column>
				<el-table-column label="电话" align="center" prop="mobile_phone"></el-table-column>

				<el-table-column label="地址" align="center" prop="">
					<template slot-scope="scope">
						<p>{{ scope.row.province }}{{ scope.row.city }}{{ scope.row.area }}{{ scope.row.address }}</p>
					</template>
				</el-table-column>
				<el-table-column label="平台备注" align="center" prop="platform_remark"></el-table-column>
				<el-table-column label="体积" align="center" prop="bulk_number"></el-table-column>
				<el-table-column label="件数" align="center" prop="pack_number"></el-table-column>
				<el-table-column label="发货状态" align="center" prop="shipping_status"></el-table-column>
				<el-table-column label="点击时间" align="center" prop="deliver_time"></el-table-column>
				<el-table-column label="导出次数" align="center" prop="excel_count"></el-table-column>
				<el-table-column label="操作" align="center" width="160">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="goOrderDetails(scope.row.order_id)">订单详情</el-button>
						<el-button type="primary" size="mini" @click="exportExcel(scope.row.order_id, scope.row.order_sn)">导出</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
		<!-- 导出弹框 -->
		<el-dialog title="导出订单" :visible.sync="exportDialog" center :modal-append-to-body="false" width="680px">
			<el-table :data="GetFactoryList" stripe style="margin-bottom: 10px;" ref="exportTable">
				<el-table-column label="工厂编号" align="center" prop="factory_sn"></el-table-column>
				<el-table-column label="工厂名称" align="center" prop="factory_name"></el-table-column>
				<el-table-column label="操作" align="center" width="250">
					<template slot-scope="scope">
						<div class="operate">
							<el-button type="primary" size="mini" @click="exportExeclF(1, scope.row)">发货清单导出</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-button type="primary" size="small" @click="exportExeclF(2)">发货清单导出</el-button>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name:"deliver_list",
		data() {
			return {
				selectContent: '', // 分类搜索平输入框的值
				classSelect: '', // 分类搜索
				searchOption: [{
					value: 0,
					label: '订单号'
				},
				{
					value:1,
					label:'收货人'
				},
				{
					value:2,
					label:"手机号码"
				}
				],
				options: [{
						value: '',
						label: '无'
					},
					{
						value: 0,
						label: '未发货'
					},
					{
						value: 1,
						label: '已发货'
					},
					{
						value: 2,
						label: '已收货'
					},
					{
						value:4,
						label:"部分发货"
					}
				],
				shipping_status: 0,
				selectModel: {
					time: '' // 时间
				},
				wList: [],
				total: 0,totalData: 0, 
				page: 0,
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
							text: '最近一周',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '最近一个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '最近三个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								picker.$emit('pick', [start, end]);
							}
						}
					]
				},
				exportDialog: false,
				GetFactoryList: [],
				export: {
					order_id: '',
					order_sn: '',
				}
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					order_by: 'deliver_time',
					asc: 2,
					order_status: 0,
					shipping_status: this.shipping_status,
					pay_status: 2
				};

				// 选择了时间
				if (this.selectModel.time != '' && this.selectModel.time != null) {
					data.start_time = this.selectModel.time[0];
					data.end_time = this.selectModel.time[1];
				}

				if (this.classSelect == 0) {
					data.order_sn = this.selectContent;
				}else if(this.classSelect == 1){
					data.accept_name = this.selectContent;
				}else if(this.classSelect == 2){
					data.mobile_phone = this.selectContent;
				}

				this.$http(this.$ApiList.DeliverList, data).then(res => {
					this.wList = res.datas.data;
					this.total = res.datas.count;
				});
			},
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			// 刷新
			refreshPage() {
				this.classSelect = '';
				this.selectContent = '';
				this.page = 1;
				this.selectModel.time = '';
				this.init();
			},
			selectTime() {
				this.init();
			},
			goOrderDetails(id) {
				this.$router.push({
					path: '/order_details',
					query: {
						id: id
					}
				});
			},
			exportExeclF(type,row){
				switch (type){
					case 1:
						window.open(`${this.$domain}furniture/Adminexcel/GetFactoryDeliverData?order_id=` + this.export.order_id  + '&factory_sn=' + row.factory_sn)
						break
					case 2:
						window.open(`${this.$domain}furniture/Adminexcel/GetAllDeliverData?order_id=` + this.export.order_id + '&order_sn='+this.export.order_sn)
						break
				}
			},
			async exportExcel(order_id, order_sn) {
				this.export.order_id = order_id;
				this.export.order_sn = order_sn;
				const { datas } = await this.$http(this.$ApiList.GetFactory, {order_id})
				this.GetFactoryList = datas;
				this.$nextTick(() => {
					this.$refs.exportTable.doLayout();
				});
				this.exportDialog = true;
				return
				let url = `${this.$domain}furniture/Adminexcel/GetAllDeliverData?order_id=` + order_id + '&order_sn=' +
					order_sn;
				window.location.href = url;
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss">
	.warehousing-list {
		.data-filtering-left {
			display: flex;
		}

		.warehousing-list-menu {
			display: flex;
		}

		.warehousing-list-menu .add {
			margin-left: 10px;
		}

		.warehousing-list-menu-left {
			flex: 1;
			display: flex;
		}

		.warehousing-list-menu-right {
			flex: 1;
			display: flex;
			flex-direction: row-reverse;
		}

		.warehousing-list-menu .search-view {
			margin-right: 10px;
		}
	}
</style>
